<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="#">
      <input type="text" /><br />
      <input type="text" /><br />

      <!-- 2）onfocusin onfocusout -->
      <!-- <p >
        <input onfocus="setValue()" class="price" type="text" />
      </p> 可以实现-->

      <!-- <p onfocus="setValue()">
        <input class="price" type="text" />
      </p> 不会在子元素上触发，不能修改value的值-->

      <p onfocusin="setValue()" onfocusout="getValue()">
        <input class="price" type="text" />
      </p>
      <!-- 可以在子元素上触发，能修改value的值 -->
    </form>
  </body>
  <script>
    // 1）onfocus onblur
    /*  var boxes = document.querySelectorAll("input");
    //遍历input
    for (var i in boxes) {
      // 获得焦点 ,添加默认值
      boxes[i].onfocus = function () {
        this.value = "这是默认内容";
      };
      //失焦 ,清空默认值
      boxes[i].onblur = function () {
        this.value = "";
      };
    }  */

    function setValue() {
      document.querySelector(".price").value = 99.99;
    }
    function getValue() {
      console.log(document.querySelector(".price").value);
    }
  </script>
</html>
